<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>sing in</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: rgb(204, 155, 223);
            background-repeat: no-repeat;
            background-size: 100%;
            position: relative;
        }

        .contain {
            width: 500px;
            height: 400px;
            border-radius: 3px;
            margin: 150px auto;
            font-size: 30px;
            font-family: serif;
            /* background: url(./img.jpg); */
            background-repeat: no-repeat;
            background-size: 100%;
            display: flex;
            align-items: center;
            text-align: center;
            position: relative;
        }
        form {
            margin: auto;
        }

        input {
            width: 250px;
            height: 25px;
            cursor: pointer;
            border: none;
            border-radius: 3px;
            margin-left: 10px;
        }

        button {
            width: 100px;
            height: 30px;
            font-size: 20px;
            margin-top: 30px;
            border-radius: 5px;
            border: none;
        }
        .box {
            display:flex;
            justify-content: space-between;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="contain">
        <form>
            <div class="box">
                <label for="">username</label>
                <input type="text" class="username">
            </div>
            <div class="box">
                <label for="">password</label>
                <input type="password" class="password">
            </div>
            <div class="box">
                <label for="">re-password</label>
                <input type="password" class="repassword">
            </div>
            <button class="btn" disabled>sign in</button>
        </form>
    </div>
    <script src="./jquery3.5.min.js"></script>
    <script>
        let ele = document.querySelector('.username');
        let password = document.querySelector('.password');
        let pwd = document.querySelector('.repassword');
        let btn = document.querySelector('.btn')
        console.log('btn====> ', btn);
        let flag1 = false;
        let flag2 = false;
        let flag3 = false;
        let flag4 = false; // ===> 用户名是否重复
        ele.onblur = checkUsername;
        function checkUsername(e) {
            let value = e.target.value
            let reg = /^[0-9a-zA-Z_-]{4,16}$/;
            if (reg.test(value)) {
                flag1 = true
                $.ajax({
                type:'get',
                url:'http://localhost:3000/name',
                data:{username:e.target.value},
                success:function(result) {
                    if(result.status = 'failed') {
                        alert('用户名已经存在')
                        flag4 = false;
                    }else{
                        flag4 = true;
                    }
                    checkBtn()
                },
                error: function () {
                    checkBtn()
                }
            })

            } else {
                flag1 = false
                alert('用户名输入错误')
            }
            
        }
        password.onblur = checkPassword;
        function checkPassword(e) {
            let value = e.target.value
            let reg = /^[0-9a-zA-Z_-]{8,15}$/;
            if (reg.test(value)) {
                flag2 = true
            } else {
                flag2 = false
                alert('密码输入错误')
            }
            checkPwd()
            checkBtn()
        }
        pwd.onblur = checkPwd;
        function checkPwd() {
            let PwdValue = pwd.value;
            let PasswordValue = password.value;
            if (PwdValue === PasswordValue) {
                flag3 = true
            } else if (PwdValue !== PasswordValue && PwdValue != '') {
                flag3 = false
                alert('输入的密码不一致')
            }
            checkBtn()
        }
        btn.onclick = function () {
            alert('登录成功')
        }
        function checkBtn() {
            if (flag1 && flag2 && flag3 && flag4) {
                btn.disabled = false;
            } else {
                btn.disabled = true;
            }
        }
    </script>
</body>

</html>